import { ExclamationCircleFilled, PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { request, useNavigate } from '@umijs/max';
import {
  Button,
  Col,
  Form,
  Input,
  Modal,
  Radio,
  Row,
  Upload,
  theme,
} from 'antd';
import { createStyles } from 'antd-style';
const { confirm } = Modal;

const useStyles = createStyles(({ token }) => {
  return {
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});

export default () => {
  let navigate = useNavigate();
  const { token } = theme.useToken();
  const [form] = Form.useForm();
  const { styles } = useStyles();

  const onFinish = (values) => {
    form.validateFields().then((values) => {
      const data = { ...values };
      request('/registerApi', { method: 'POST', data }).then((res) => {
        const { code, data, msg } = res;
        if (code === 200) {
          confirm({
            title: '注册成功，去登录?',
            icon: <ExclamationCircleFilled />,
            content: '请妥善保管好您的账号、密码',
            onOk() {
              navigate('/login', { replace: true });
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        } else {
        }
      });
    });
  };

  const normFile = () => {};

  return (
    <PageContainer
      className={styles.container}
      header={{
        title: '欢迎注册知思勤专利系统',
        breadcrumb: {},
      }}
      content="请依次输入一下信息"
      footer={[
        <Button key="rest">重置</Button>,
        <Button key="submit" type="primary" onClick={onFinish}>
          提交
        </Button>,
      ]}
    >
      <Row>
        <Col span={12} offset={6}>
          <Form
            layout="vertical"
            form={form}
            name="register"
            onFinish={onFinish}
            initialValues={{
              createTime: '',
              userName: '',
              wx: '',
              company: '',
              nickName: '',
              email: '',
              phonenumber: '',
              sex: '',
              avatar: '',
              password: '',
            }}
          >
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item name="company" label="公司名称">
                  <Input placeholder="请输入公司名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="userName"
                  label="账号"
                  rules={[
                    {
                      required: true,
                      message: '请输入账号!',
                    },
                  ]}
                >
                  <Input placeholder="请输入账号" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="nickName"
                  label="昵称"
                  rules={[
                    {
                      required: true,
                      message: '请输入昵称!',
                    },
                  ]}
                >
                  <Input placeholder="请输入昵称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="wx" label="微信">
                  <Input placeholder="请输入微信" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[
                    {
                      type: 'email',
                      message: '邮箱格式不正确!',
                    },
                    {
                      required: true,
                      message: '请输入邮箱!',
                    },
                  ]}>
                  <Input placeholder="请输入邮箱" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="phonenumber"
                  label="手机号码"
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号码!',
                    },
                  ]}
                >
                  <Input placeholder="请输入手机号码" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="sex" label="性别">
                  <Radio.Group>
                    <Radio value="1"> 男 </Radio>
                    <Radio value="2"> 女 </Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  name="password"
                  label="密码"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码!',
                    },
                  ]}
                  hasFeedback
                >
                  <Input.Password />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  name="confirm"
                  label="确认密码"
                  dependencies={['password']}
                  hasFeedback
                  rules={[
                    {
                      required: true,
                      message: '请输入密码!',
                    },
                    ({ getFieldValue }) => ({
                      validator(_, value) {
                        if (!value || getFieldValue('password') === value) {
                          return Promise.resolve();
                        }
                        return Promise.reject(new Error('两次输入的密码不一致!'));
                      },
                    }),
                  ]}
                >
                  <Input.Password />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="头像"
                  valuePropName="fileList"
                  getValueFromEvent={normFile}
                >
                  <Upload action="/upload.do" listType="picture-card">
                    <button
                      style={{
                        border: 0,
                        background: 'none',
                      }}
                      type="button"
                    >
                      <PlusOutlined />
                      <div
                        style={{
                          marginTop: 8,
                        }}
                      >
                        Upload
                      </div>
                    </button>
                  </Upload>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
    </PageContainer>
  );
};
